<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿小米首页</title>
	<link rel="stylesheet" href="./css/main.css">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

	<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
	<div class="top_ad">
		<a href=""></a>
	</div>
	<div class="top_nav">
		<div class="top_mid">
			<div class="top_left">
				<a href="">小米商城</a><span>|</span>
				<a href="">MIUI</a><span>|</span>
				<a href="">米聊</a><span>|</span>
				<a href="">游戏</a><span>|</span>
				<a href="">多看阅读</a><span>|</span>
				<a href="">云服务</a><span>|</span>
				<a href="">金融</a><span>|</span>
				<a href="">小米商城移动版</a><span>|</span>
				<a href="">问题反馈</a><span>|</span>
				<a href="">Select Region</a>
			</div>
			<div class="top_right">
				<a href=""><i class='iconfont'>&#xe616;</i>登录</a><span>|</span>
				<a href=""><i class="iconfont"></i>注册</a><span>|</span>
				<a href=""><i class="iconfont">&#xe905;</i>消息通知</a>
				<a class="car" href=""><i class="iconfont">&#xe60c;</i>购物车(0)
				<div class="boxshow">空空如也</div></a>
			</div>
		</div>
	</div>
	<div class="header">
		<div class="header_mid">
			<div class="menu">
				<a href="" class="logo"></a>
				<a href="" class="yuan"><img src="./images/yy.gif" alt=""></a>
				<div class="menu_list">
					<a href="">小米手机</a>
					<a href="">红米</a>
					<a href="">平板 · 笔记本</a>
					<a href="">电视</a>
					<a href="">盒子 · 影音</a>
					<a href="">路由器</a>
					<a href="">智能硬件</a>
					<a href="">服务</a>
				</div>
				<div class="soso">
					<input class="text" type="text">
					<input class="btn iconfont" type="submit" value="&#xe616;">
					<div class="keywords">
						<span>红米4s 699元起</span>
						<span>笔记本</span>
					</div>
				</div>
			</div>
			<div class="banner">
				<ul class="img_list">
					<li class="list">
						<a href=""><img src="./images/1.jpg" alt=""></a>
					</li>
					<li class="list">
						<a href=""><img src="./images/2.jpg" alt=""></a>
					</li>
					<li class="list">
						<a href=""><img src="./images/3.jpg" alt=""></a>
					</li>
					<li class="list">
						<a href=""><img src="./images/4.jpg" alt=""></a>
					</li>
					<li class="list">
						<a href=""><img src="./images/5.jpg" alt=""></a>
					</li>
				</ul>
				<ul class="cilck_list">
					<li class="item"></li>
					<li class="item"></li>
					<li class="item"></li>
					<li class="item"></li>
					<li class="item"></li>
				</ul>
				<div class="cilck_left"></div>
				<div class="cilck_right"></div>
				<ul class="menu_list">
					<li class="list">手机 电话卡<i class="iconfont"></i>
					<div class="son">1</div></li>
					<li class="list">手机 电话卡<i class="iconfont"></i><div class="son">2</div></li>
					<li class="list">手机 电话卡<i class="iconfont"></i>
					<div class="son">3</div></li>
					<li class="list">手机 电话卡<i class="iconfont"></i>
					<div class="son">4</div></li>
					<li class="list">手机 电话卡<i class="iconfont"></i><div class="son">5</div></li>
					<li class="list">手机 电话卡<i class="iconfont"></i></li>
					<li class="list">手机 电话卡<i class="iconfont"></i></li>
					<li class="list">手机 电话卡<i class="iconfont"></i></li>
					<li class="list">手机 电话卡<i class="iconfont"></i></li>
					<li class="list">手机 电话卡<i class="iconfont"></i></li>
				</ul>
				
			</div>
			<div class="tujian">
				<ul class="server_list">
					<li class="list">
						<a href="">
							<i class='iconfont'>&#xe908;</i>
							<p>选购手机</p>
							<span class='line_right'></span>
							<span class='line_bottom'></span>
						</a>
					</li>
					<li class="list">
						<a href="">
							<i class='iconfont'>&#xe908;</i>
							<p>选购手机</p>
							<span class='line_right'></span>
							<span class='line_bottom'></span>
						</a>
					</li>
					<li class="list">
						<a href="">
							<i class='iconfont'>&#xe908;</i>
							<p>选购手机</p>
							<span class='line_bottom'></span>
						</a>
					</li>
					<li class="list">
						<a href="">
							<i class='iconfont'>&#xe908;</i>
							<p>选购手机</p>
							<span class='line_right'></span>
						</a>
					</li>
					<li class="list">
						<a href="">
							<i class='iconfont'>&#xe908;</i>
							<p>选购手机</p>
							<span class='line_right'></span>
						</a>
					</li>
					<li class="list">
						<a href="">
							<i class='iconfont'>&#xe908;</i>
							<p>选购手机</p>
						</a>
					</li>
				</ul>
				<a href="" class="tujian_img first">
					<img src="./images/tujian.jpg" alt="">
				</a>
				<a href="" class="tujian_img">
					<img src="./images/tujian.jpg" alt="">
				</a>
				<a href="" class="tujian_img">
					<img src="./images/tujian.jpg" alt="">
				</a>
			</div>
			<div class="star">
				<div class="star_header">
					<h2>小米明星单品</h2>
					<div class="cilck_box">
						<i class='iconfont' id="cilck_left" ></i>
						<i class="iconfont" id="cilck_right"></i>
					</div>
				</div>
				<ul class="star_list">
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item last">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
					<li class="item last">
						<a class="img" href=""><img src="./images/star.png" alt=""></a>
						<a class="title" href="">小米Note 2</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<p class="price">2799元起</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="bg_out">
		<div class="mid">
			<div class="son">content1</div>
			<div class="son">content2</div>
			<div class="son">content3</div>
			<div class="son">content4</div>
			<div class="son">content5</div>
			<div class="son">content6</div>
		</div>
	</div>
	<div class="main"></div>
	<div class="server"></div>
	<div class="footer"></div>
	<div class="fied_top"></div>
	<div class="to_top">顶部</div>
</body>
</html>